<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

   <div id="container" style="border: 1px solid black;width: 400px;height: 400px;float: left;">
   	    <div id="content" style="height:350px;">
   	    	
   	    </div>
        <div style="border-top: 1px solid black;width: 400px;height: 50px;">
        	<input id="msg" /><button onclick="subSend();">send</button>
        </div>
   </div>
   <div id="userList" style="border: 1px solid black;width: 100px;height: 400px;float: left;"></div>

<script type="text/javascript" src="js/jquery-produce-3.1.0.min.js" charset="UTF-8"></script>
<script type="text/javascript">
   var username='${sessionScope.username}';
   
   var ws;
   var target="ws://localhost:8083/singlechat/chatSocket?username=" + username;
   window.onload=function(){
	   if('WebSocket' in window){
		   ws=new WebSocket(target);
	   }else if('MozWebSocket' in window){
		   ws=new MozWebSocket(target);
	   }else{
		   alert("WebSocket is unsupported by this browser.");
		   return;
	   }
	   
	   ws.onmessage=function(event){
	   	   console.log(event);
		   var value=JSON.parse(event.data);
		   if(undefined!=value.welcome){
		   	  $("#content").append(value.welcome + "<br />"); 
		   }
		   
		   if(undefined!=value.username){
		   	  $("#userList").html("");
		   	  $(value.username).each(function(i,val){
		   	  	 $("#userList").append("<input type='checkbox' value='" + val + "'/>" + val + "<br />");
		   	  });
		   }
		   
		   if(undefined!=content){
		   	  $("#content").append(value.content);
		   }
		}
   }
   
   function subSend(){
   	   var ss=$("#userList :checked");
   	   var val=$("#msg").val();
   	   console.info(ss.length);
   	   
   	   var obj=null;
   	   
   	   if(ss.length==0){
   	   	  obj={
   	   	  	 msg:val,
   	   	  	 type:1 //1为广播 2单聊
   	   	  }
   	   }else{
   	   	  var to = $("#userList :checked").val();
   	   	  
   	   	  obj={
   	   	  	 to:to,
   	   	  	 msg:val,
   	   	  	 type:2 //1为广播 2单聊
   	   	  }
   	   }
	  
	   var str=JSON.stringify(obj);
	   ws.send(str);
	   $("#msg").val("");
   } 
</script>
</body>
</html>








